<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例</title>
    <script src="../js库/mock.js"></script>
    <script src="../js库/vue.js"></script>
  
</head>
<body>
    <div id="root">
    <h3>注册页面</h3>
    <form >
        <table width="500" align="center">
            <tr>
                <td><label for="boy">性别:</label></td>
                <td>
                    <label for="boy">男</label><input checked type="radio" name="sex" id="boy" value="boy"/>
                    <label for="girl">女</label><input type="radio" value="girl" name="sex" id="girl" />
                </td>
            </tr>
            <tr>
                <td>生日:</td>
                <td>
                    <select name="year">
                    <option v-for="index in 2022" :key="index" v-if="(2022-index)>18&&(2022-index)<65" :value="index">{{index}}</option>
                </select>
                <select name="month">
                    <option v-for="index in 12" :key="index" :value="index"  >{{index}}</option>
                </select>
                <select name="day">
                    <option v-for="index in 31" :key="index" :value="index" >{{index}}</option>
                </select>
            </td>
            </tr>
            <tr>
                <td>所在地区:</td>
                <td><input type="text" name="location" placeholder="请输入所在地区"></td>
            </tr>
            <tr>
                <td>婚姻状况:</td>
                <td>
                    <label for="yh">已婚</label><input type="radio"  name="status" id="yh" value="yh"/>
                    <label for="wh">未婚</label><input checked type="radio"  name="status" id="wh" value="wh" />
                    <label for="lh">离婚</label><input type="radio"  name="status" id="lh" value="lh"/>
                </td>
            </tr>
            <tr>
                <td>学历:</td>
                <td><select name="xl">
                    <option value="x">小学</option>
                    <option value="c">初中</option>
                    <option value="g" selected>高中</option>
                 
                </select></td>
            </tr>
            <tr>
                <td>喜欢类型:</td>
                <td>
                    <label for="a">a</label><input type="checkbox" value="a" name="type" id="a" />
                    <label for="b">b</label><input type="checkbox" value="b" name="type" id="b" />
                    <label for="c">c</label><input type="checkbox" value="c" name="type" id="c" />
                </td>
            </tr>
            <tr>
                <td>自我介绍:</td>
                <td><textarea placeholder="请进行自我介绍" name="self" ></textarea></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="checkbox" >请阅读并同意<a href="https://wenku.baidu.com/view/9af0320676c66137ee061909.html?_wkts_=1669018643651">协议</a></td>
            </tr>
            <tr>
                <td> <input type="reset"  ></td>
                <td>&nbsp; <input type="submit"></td>
            </tr>
        </table>
       
    </form>
</div>
</body>
<script type="text/javascript">
    // alert(Mock.mock('@word(10)'));
    new Vue({
        el:"#root",
        data: { 
            d1:{
            id:Mock.mock({'num|1-10':1}).num,      
            title:Mock.mock('@cname'),
            qu:Mock.mock({'bool|1-2':true}).bool,
            search:Mock.mock({'search|100-200':101}).search,
            last:Mock.mock({'la|200-300':201}).la,
            }
                }
    })
</script>
</html>